<div class="modal fade in ip-box" tabindex="-1" role="dialog" data-keyboard="false" data-backdrop="static" aria-labelledby="myModalLabel" aria-hidden="true" id="newlyAdded" *ngIf="initService.init">
    <div class="modal-dialog modal-lg modal-lg-f modal-lg-calc" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" 
                        class="close" 
                        data-dismiss="modal" 
                        aria-hidden="true"
                        (click)="initService._init()"
                        >×
                </button>
                <h4 class="modal-title" id="myModalLabel">应用管理 — 新增</h4>
            </div>
            <form #addForm="ngForm" (ngSubmit)="_onSubmit(addForm.value)" enctype='multipart/form-data'>
                <div class="modal-body">
                    
                    <div class="col-xs-12 col-sm-6">
                        
                        <div class="form-group">
                            <label class="col-xs-12 col-sm-3 control-label text-right">所属机构：</label>
                            <div class="col-xs-12 col-sm-9" *ngIf="getKeySecret">
                                <input class="form-control readonly" readonly [value]="getKeySecret[4].institutionName">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-xs-12 col-sm-3 control-label text-right">名称：</label>
                            <div class="col-xs-12 col-sm-9">
                                <input type="text"
                                	   name="appName"
                                	   class="form-control" 
                                	   autocomplete="off" 
                                	   required
                                       #appName="ngModel"
                                       placeholder="请输入名称"
                                	   ngModel
                                	   >
                                <label class="red required">*</label>
                                <div class="error" *ngIf="appName.invalid && (appName.touched)">
									<small class="error" *ngIf="appName.errors.required">请输入名称</small>
								</div>
                            </div>       
                        </div>

                        <div class="form-group" *ngIf="getKeySecret">
                            <label class="col-xs-12 col-sm-3 control-label text-right">唯一标识：</label>
                            <div class="col-xs-12 col-sm-9">
                                <input type="text" 
                                	   name="appKey"
                                	   class="form-control"
                                	   readonly  
                                	   [ngModel]="getKeySecret[0].appKey"
                                	   >
                            </div>       
                        </div>

                        <div class="form-group" *ngIf="getKeySecret">
                            <label class="col-xs-12 col-sm-3 control-label text-right">密钥：</label>
                            <div class="col-xs-12 col-sm-9">
                                <input type="text" 
                                	   name="appSecret"
                                	   class="form-control" 
                                	   readonly
                                	   [ngModel]="getKeySecret[1].appSecret"
                                	   >
                            </div>       
                        </div>

                        <div class="form-group ">
                            <label class="col-xs-12 col-sm-3 control-label text-right">应用类型：</label>
                            <div class="col-xs-12 col-sm-9">
                                <select name="appType" 
                                		#appType="ngModel"
                                	    ngModel="1"
                                	    >
                                	<option value="0">普通应用</option>
                                	<option value="1">内部站点</option>
								</select>
								<!-- <div class="error" *ngIf="appType.invalid && (appType.dirty||appType.touched)">
									<small class="error" *ngIf="appType.errors.required">请选择应用类型</small>
								</div> -->
                            </div>       
                        </div>
                    </div> 

                    <div class="col-xs-12 col-sm-6">
                        
                        <div class="form-group" [ngStyle]="{ 'height': '40px' }"></div>

                        <div class="form-group">
                            <label class="col-xs-12 col-sm-3 control-label text-right">URL：</label>
                            <div class="col-xs-12 col-sm-9">
                                <input type="text" 
                                	   name="appUri"
                                	   class="form-control" 
                                	   autocomplete="off" 
                                       required 
                                       pattern="(http|ftp|https):\/\/([\w.]+\/?)\S*"
                                       #appUri="ngModel"
                                       placeholder="请输入url"
                                	   ngModel
                                	   >
                                <label class="red required">*</label>
                                <div class="error" *ngIf="appUri.invalid && (appUri.touched)">
                                    <small class="error" *ngIf="appUri.errors.required">请输入URL</small>
                                    <small class="error" *ngIf="appUri.errors.pattern">请输入正确的URL</small>
								</div>
                            </div>       
                        </div>

                        <div class="form-group ">
                            <label class="col-xs-12 col-sm-3 control-label text-right">IP地址：</label>
                            <div class="col-xs-12 col-sm-9">
                                <input type="text" 
                                	   name="appIp"
                                	   class="form-control" 
                                	   autocomplete="off" 
                                       pattern="^[0-9\.\!\|\-\,\*]*$"
                                       #appIp="ngModel"
                                       placeholder="ip地址"
                                	   ngModel
                                	   >
                                <div class="error" *ngIf="appIp.invalid && (appIp.touched)">
                                    <small class="error" *ngIf="appIp.errors.pattern">请输入正确的IP地址</small>
								</div>
                            </div>       
                        </div>
						
						<div class="form-group">
                            <label class="col-xs-12 col-sm-3 control-label text-right" >授权类型：</label>
                            <div class="col-xs-12 col-sm-9">
                            	<div class="checkbox">
	                                <input type="checkbox"
	                                	   name="authType" 
	                                	   style="margin-left:0;" 
	                                	   checked 
                                           disabled 
	                                	   >
	                                <span style="margin-left:16px;">授权码Code</span>
                                </div>
                            </div>       
                        </div>

                        <div class="form-group ">
                            <label class="col-xs-12 col-sm-3 control-label text-right">应用状态：</label>
                            <div class="col-xs-12 col-sm-9">
                                <select name="status"  
                                        #status="ngModel"
                                        ngModel="1"
                                        >
                                    <option value="0">待审核</option>
                                    <option value="1">正常</option>
                                    <option value="2">冻结</option>
                                    <option value="3">逻辑删除</option>
                                    <option value="4">不合格</option>
                                </select>
                                <!-- <div class="error" *ngIf="status.invalid && (status.dirty||status.touched)">
                                    <small class="error" *ngIf="status.errors.required">请选择应用状态</small>
                                </div> -->
                            </div>       
                        </div>
                    </div>

                    <!-- 许可类型 BEGIN -->
                        <div class="col-xs-12 col-sm-12" *ngIf="getKeySecret">
                            <div class="form-group">
                                <label class="col-xs-12 col-sm-2 control-label text-right">许可类型：</label>
                                <div class="col-xs-12 col-sm-10" style="padding:8px 0 0 20px;">
                                    
                                    <div class="margin-top-zero checkbox col-xs-12 col-sm-3" *ngFor="let val of getKeySecret[2].authType">
                                        <input type="checkbox"
                                               name="grantType" 
                                               #need
                                               [checked]="{ true: val.sysStatus }"
                                               [value]="val.sysValue"
                                               (click)="_grantType(need.value, need.checked)"
                                               >
                                        <span>{{ val.displayName }}</span>
                                    </div>
                                    
                                </div>
                            </div>
                        </div>
                    <!-- 许可类型 END -->
                    
                    <!-- 授权范围 BEGIN -->
                        <div class="col-xs-12 col-sm-12" *ngIf="getKeySecret">
                        
                            <div class="form-group">
                                
                                <label class="col-xs-12 col-sm-2 control-label text-right">授权范围：</label>

                                <div class="col-xs-12 col-sm-10">

                                    <fieldset class="field" *ngFor="let val of getKeySecret[3].scopes">
                                        <legend>
                                            <!-- <input type="checkbox" disabled> -->
                                            <span>{{ val.serviceTypeName }}</span>
                                        </legend>
                                        <div style="padding-left:30px">
                                            <div class="col-xs-6 col-sm-4" *ngFor="let voVal of val.scopesTypeVo">
                                                <input type="checkbox"
                                                    name="scope" 
                                                    #need
                                                    [value]="voVal.scopesCode"
                                                    (click)="_scope(need.value, need.checked)"
                                                    >
                                                <span>{{ voVal.scopeName }}</span>
                                            </div>
                                        </div>
                                    </fieldset>

                                </div>

                            </div>

                        </div>
                    <!-- 授权范围 END -->
                    
                    <!-- 上传图片 BEGIN -->
                        <div class="col-xs-12 col-sm-12">
                            <div class="form-group" >
                                <label class="col-xs-12 col-sm-2 control-label text-right">上传图片：</label>
                                <div class="col-xs-12 col-sm-10">
                                    
                                    <fieldset>
                                    
                                        <div id="uploadForm" enctype='multipart/form-data'>     

                                            <div class="fileinput fileinput-new" data-provides="fileinput" id="exampleInputUpload">
                                                
                                                <div>

                                                    <span class="btn btn-primary btn-file">
                                                        <span class="fileinput-new"><span class="glyphicon glyphicon-picture"></span> 选择图片</span>
                                                        <span class="fileinput-exists"><span class="glyphicon glyphicon-transfer"></span> 换一张</span>
                                                        <input type="file" 
                                                               name="imageinfo" 
                                                               id="picID" 
                                                               accept="image/gif,image/jpeg,image/x-png"
                                                               >
                                                    </span>

                                                    <a href="javascript:;" 
                                                    class="btn btn-warning fileinput-exists" 
                                                    data-dismiss="fileinput"
                                                    ><span class="glyphicon glyphicon-trash"></span> 移除
                                                    </a>

                                                </div>
                                                <div class="fileinput-preview fileinput-exists thumbnail"></div>
                                                <div class="fileinput-new thumbnail">
                                                    <!-- <img class="default-img" src="../../../assets/public/upload-bg.png"> -->
                                                </div>
                                            </div>
                                        
                                        </div>

                                    </fieldset>

                                </div>   
                            </div>
                        </div>
                    <!-- 上传图片 END -->                    

                    <div class="col-xs-12 col-sm-12">
                    	<div class="form-group">
                            <label class="col-xs-12 col-sm-2 control-label text-right">简介：</label>
                            <div class="col-xs-12 col-sm-10">
                                <textarea rows="5" 
                                		  type="text" 
                                		  name="appSummary" 
                                		  class="form-control" 
                                		  #appSummary
                                          ngModel
                                		  >                                    
                                </textarea>
                                
                            </div>
                    	</div>
                	</div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-fff" 
                            data-dismiss="modal" 
                            type="button"
                            (click)="initService._init()"
                            >取消
                    </button>
                    <button type="submit" 
                            class="btn btn-primary" 
                            [disabled]="addForm.invalid||hasCheckbox"
                            >
                        <span class="glyphicon glyphicon-plus"></span> 新增
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
